<template>

  <div>
      <div class="wrapper">
        <input type="text" placeholder="请输入城市名或拼音" v-model="putVal">

      </div>

      <div class="search_content" v-show="putVal" ref="searchBox">
        <ul>
          <li class="search_text" v-for="(item,key) in list" @click="handleCityClick(item.name)">{{item.name}}</li>
          <li class="search_text" v-show="flag">没有找到匹配数据</li>
        </ul>


      </div>
  </div>
</template>

<script>
  import Bscroll from 'better-scroll'
    export default {
        name: "Search",
      props:{
          cities:Object
      },
      data(){
          return{
            putVal:"",
            list:[],
            timer:null
          }
      },
      methods:{
        handleCityClick(city){
          this.$store.dispatch('changeCity',city);
          this.$router.push('/')

        }
      },
      computed:{
          flag(){
            return !this.list.length;
          }
      },
      watch:{
          putVal(){
            if(this.timer){
              clearTimeout(this.timer);
            }
            if(!this.putVal){
              this.list=[]
              return
            }
            this.timer=setTimeout(()=>{
              const result=[];
              for(let i in this.cities){
                this.cities[i].forEach((val)=>{
                  if(val.spell.indexOf(this.putVal)>-1 || val.name.indexOf(this.putVal)>-1){
                    result.push(val);
                  }
                })
              }
              this.list=result
            },30)
          }
      },
      mounted(){
          this.scroll=new Bscroll(this.$refs.searchBox)
      }
    }
</script>

<style lang="stylus" scoped>
  .wrapper{
    height:.36rem;
    padding:0 .1rem;
    background:#00bcd4;
    input{
      width:100%;
      text-align:center;
      padding:0 .05rem;
      box-sizing:border-box;
      border-radius:.05rem;
      height:.31rem;
      line-height:.31rem;
      color:#666;

    }
  }

  .search_content{
    width:100%;
    background:#cacaca;
    position:absolute;
    top:.8rem;
    bottom:0;
    left:0;
    overflow:hidden;
    z-index:1;
    .search_text{
      line-height:.26rem;
      padding-left:.1rem;
      border-bottom:1px solid #cacaca;
      background:white;

    }

  }
</style>
